<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <!-- <el-scrollbar> -->
    <div class="tableLayout">
      <el-card shadow="never" :body-style="{ padding: '20px' }" class="mt10">
        <div slot="header" class="f16">
          <span style="font-weight: 600">测试标题</span>
        </div>
        <div class="tableHeight">
          <el-input v-model="input" placeholder="" clearable @change="" style="background-color: aquamarine !important"></el-input>

          <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="50" stripe id="exportTab" />
          <div>111</div>

          <div>保存 打印</div>
        </div>
        <el-select
          v-model="value"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="Please enter a keyword"
          :remote-method="remoteMethod"
          :loading="loading"
          style="width: 240px"
        >
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          <template #loading>
            <svg class="circular" viewBox="0 0 50 50">
              <circle class="path" cx="25" cy="25" r="20" fill="none" />
            </svg>
          </template>
        </el-select>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'J'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const value = ref<string[]>([])
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` }
  })
})

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 3000)
  } else {
    options.value = []
  }
}

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming'
]

const input = ref('')
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入品牌',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '请选择类型',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: 'option1',
        optionValue: 'option1',
        optionLabel: 'option1'
      },
      {
        optionKey: 'option2',
        optionValue: 'option2',
        optionLabel: 'option2'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: 'option1',
        optionValue: 'option1',
        optionLabel: 'option1'
      },
      {
        optionKey: 'option2',
        optionValue: 'option2',
        optionLabel: 'option2'
      }
    ]
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputDisabled: true,
    inputValue: '',
    inputLabel: '型体'
  },
  {
    type: 'button',
    checkboxLabel: '清购批处理'
  },
  {
    type: 'button',
    checkboxLabel: '进入订购程序'
  }
])
const srcList = ref([])
const tableHeader = ref([
  {
    disableBC: true,
    type: 'select',
    label: '分类名称',
    prop: 'typeName'
  },
  {
    label: '日期',
    prop: 'date'
  },
  {
    Multistage: true,
    label: '针车',
    children: [
      {
        label: '针车组别',
        prop: 'stitchDept'
      },
      {
        label: '欠数',
        prop: 'stitchShort'
      },
      {
        label: '计划',
        prop: 'stitchPlanDate'
      },
      {
        label: '实际',
        prop: 'stitchActualDate'
      }
    ]
  },
  {
    Multistage: true,
    label: '大底',
    children: [
      {
        label: '欠数',
        prop: 'soleShort'
      },
      {
        label: '计划',
        prop: 'solePlanDate'
      },
      {
        label: '实际',
        prop: 'soleActualDate'
      }
    ]
  }
])
const arr2 = ref<any>([
  {
    style: 'AB01',
    color: '咖啡色',
    colorCode: 'CML'
  },
  {
    style: 'AB01',
    color: '黑色',
    colorCode: 'ATK'
  },
  {
    style: 'AB01',
    color: '大红色',
    colorCode: 'BLK'
  },
  {
    style: 'AB02',
    color: '红色',
    colorCode: 'BLK'
  }
])
const type = formList.value.find(
  (item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '请选择类型'
)
const getTableList = () => {
  const types = formList.value.find(
    (item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '请选择类型'
  )?.selectOptions
  arr2.value.forEach((item: any) => {
    types?.push({
      optionKey: item.color,
      optionValue: item.color,
      optionLabel: item.color
    })
  })
}
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    const type = (
      formList.value.find(
        (item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '请选择类型'
      ) as any
    ).selectValue
    if (type) {
      ;(formList.value.find((item: any) => item.type === 'input' && item.inputLabel === '型体') as any).inputPlaceholder = arr2.value.find(
        (item: any) =>
          item.color ===
          (
            formList.value.find(
              (item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '请选择类型'
            ) as any
          ).selectValue
      ).style
    }
  }
)

const tableData = ref([
  {
    date: '2016-05-01',
    stitchDept: '123',
    stitchShort: '123',
    stitchPlanDate: '123',
    stitchActualDate: '123',
    soleShort: '123',
    solePlanDate: '123',
    soleActualDate: '123',
    typeName: {
      selectValue: '666',
      options: [
        {
          label: '蹇大爷',
          value: '111',
          LeftLabel: '111',
          RightLabel: '蹇大爷'
        },
        {
          label: '蹇大爷2',
          value: '222',
          LeftLabel: '222',
          RightLabel: '蹇大爷2'
        },
        {
          label: '蹇大爷3',
          value: '333',
          LeftLabel: '333',
          RightLabel: '蹇大爷3'
        },
        {
          label: '蹇大爷4',
          value: '444',
          LeftLabel: '444',
          RightLabel: '蹇大爷4'
        }
      ]
    }
  },
  {
    date: '2016-05-01',
    stitchDept: '123',
    stitchShort: '123',
    stitchPlanDate: '123',
    stitchActualDate: '123',
    soleShort: '123',
    solePlanDate: '123',
    soleActualDate: '123',
    typeName: {
      selectValue: '666',
      options: [
        {
          label: '蹇大爷',
          value: '111',
          LeftLabel: '666',
          RightLabel: '777'
        },
        {
          label: '蹇大爷2',
          value: '222',
          LeftLabel: '666',
          RightLabel: '777'
        },
        {
          label: '蹇大爷3',
          value: '333',
          LeftLabel: '666',
          RightLabel: '777'
        },
        {
          label: '蹇大爷4',
          value: '444',
          LeftLabel: '666',
          RightLabel: '777'
        }
      ]
    }
  },
  {
    date: '123',
    stitchDept: '123',
    stitchShort: '123',
    stitchPlanDate: '123',
    stitchActualDate: '123',
    soleShort: '123',
    solePlanDate: '123',
    soleActualDate: '123',
    typeName: {
      selectValue: '666',
      options: [
        {
          label: '蹇大爷',
          value: '111',
          LeftLabel: '666',
          RightLabel: '777'
        },
        {
          label: '蹇大爷2',
          value: '222',
          LeftLabel: '666',
          RightLabel: '777'
        },
        {
          label: '蹇大爷3',
          value: '333',
          LeftLabel: '666',
          RightLabel: '777'
        },
        {
          label: '蹇大爷4',
          value: '444',
          LeftLabel: '666',
          RightLabel: '777'
        }
      ]
    }
  }
])

const findHandle = (wantFind: any) => {
  let newArr = arr2.value.filter((item: any) => {
    for (const key in item) {
      if (item[key].toLowerCase().includes(wantFind.toLowerCase())) {
        return true
      }
    }
  })
  return newArr
}
console.log(findHandle('02'))

// function search(query: any) {
//   let results = [];
//   for (let i = 0; i < arr.value.length; i++) {
//     for (let key in arr.value[i]) {
//       if (arr.value[i][key].toLowerCase().includes(query.toLowerCase())) {
//         results.push(arr.value[i]);
//         // break;
//       }
//     }
//   }
//   return results;
// }
// console.log(search('02'));
</script>

<style lang="less" scoped>
.el-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}

.loading-path .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}

.loading-path .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}

.loading-path .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}

.loading-path .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}

@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}

.system-role-container {
  .system-role-padding {
    padding: 15px;

    .el-table {
      flex: 1;
    }
  }
}

.layout-pd {
  padding: 25px !important;
}

.layout-flex {
  display: flex;
  flex-direction: column;
  flex: 1;
}

// 用于界面高度自适应
.layout-padding {
  &:extend(.layout-pd);
  position: absolute;
  left: 0;
  top: 50;
  height: 100%;
  overflow: hidden;
  &:extend(.layout-flex);

  &-auto {
    height: inherit;
    &:extend(.layout-flex);
  }

  &-view {
    background: var(--el-color-white);
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    overflow: hidden;
  }
}
</style>
